import React from 'react';
var Carousel = require('nuka-carousel');

let ArticleImgs = React.createClass({
    mixins: [Carousel.ControllerMixin],

    orientationChange() {
        this.forceUpdate();
    },

    componentDidUpdate() {
          let slideItem = document.querySelector('.slider-list .slider-slide:first-child');
          let slide = document.querySelector('.slider-list');
          slide.style.height = slideItem.clientHeight>document.clientHeight?document.clientHeight+"px":slideItem.clientHeight + 'px';
    },

    componentDidMount() {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    },

    componentWillUnmount() {
        window.removeEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    },

    render() {
        var settings = {
            decorators: DefaultDecorators,
            autoplay: false
        };
        return (<div id="articlephotos" style={{backgroundColor:"white",fontSize:"0.9rem", minWidth:"100%"}}>
                        <Carousel {...settings}>
                            {this.props.imgs}
                        </Carousel>
                    </div>);
    }
});

const DefaultDecorators = [
  {
    component: React.createClass({
      render() {
        return (
          <button
            style={this.getButtonStyles(this.props.currentSlide === 0 && !this.props.wrapAround)}
            onClick={this.handleClick}>{"<<"}</button>
        )
      },
      handleClick(e) {
        e.preventDefault();
        this.props.previousSlide();
      },
      getButtonStyles(disabled) {
        return {
          border: 0,
          background: 'rgba(0,0,0,0.4)',
          color: 'white',
          padding: 10,
          outline: 0,
          opacity: disabled ? 0.3 : 1,
          cursor: 'pointer'
        }
      }
    }),
    position: 'CenterLeft'
  },
  {
    component: React.createClass({
      render() {
        return (
          <button
            style={this.getButtonStyles(this.props.currentSlide + this.props.slidesToScroll >= this.props.slideCount && !this.props.wrapAround)}
            onClick={this.handleClick}>{">>"}</button>
        )
      },
      handleClick(e) {
        e.preventDefault();
        this.props.nextSlide();
      },
      getButtonStyles(disabled) {
        return {
          border: 0,
          background: 'rgba(0,0,0,0.4)',
          color: 'white',
          padding: 10,
          outline: 0,
          opacity: disabled ? 0.3 : 1,
          cursor: 'pointer'
        }
      }
    }),
    position: 'CenterRight'
  }
];

export default ArticleImgs;